import avatar from "./images/bozai.png";
import React, { createRef } from "react";
import "./Appscss.scss";
import orderBy from "lodash/orderBy";
import Tab from "./components/Tabs.js";
function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const timestamp = new Date().getTime();
console.log(formatDate(timestamp));

class App extends React.Component {
  textareaRef = createRef();
  state = {
    active: "hot",
    txt: "",
    tab: [
      { type: "hot", text: "最热" },
      { type: "time", text: "最新" },
    ],
    user: {
      // 用户id
      uid: "30009257",
      // 用户头像
      avatar,
      // 用户昵称
      uname: "黑马前端",
    },
    defaultlist: [
      {
        // 评论id
        rpid: 3,
        // 用户信息
        user: {
          uid: "13258165",
          avatar:
            "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg",
          uname: "周杰伦",
        },
        // 评论内容
        content: "哎哟，不错哦",
        // 评论时间
        ctime: "10-18 08:15",
        // 喜欢数量
        like: 98,
        // 0：未表态 1: 喜欢 2: 不喜欢
        action: 0,
      },
      {
        rpid: 2,
        user: {
          uid: "36080105",
          avatar:
            "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg",
          uname: "许嵩",
        },
        content: "我寻你千百度 日出到迟暮",
        ctime: "11-13 11:29",
        like: 88,
        action: 2,
      },
      {
        rpid: 1,
        user: {
          uid: "30009257",
          avatar,
          uname: "黑马前端",
        },
        content: "学前端就来黑马",
        ctime: "10-19 09:00",
        like: 66,
        action: 1,
      },
    ],
  };
  tabClick = (type) => {
    if (type === "hot") {
      const newlist = this.state.defaultlist.sort((a, b) => b.like - a.like);
      this.setState({
        active: type,
        defaultlist: newlist,
      });
    } else {
      const newlist = orderBy(this.state.defaultlist, ["ctime"], ["desc"]);
      this.setState({
        active: type,
        defaultlist: newlist,
      });
    }
    // .reverse();
    // console.log(newlist);
  };
  delComment = (id) => {
    const newList = this.state.defaultlist.filter((item) => item.rpid !== id);
    this.setState({
      defaultlist: newList,
    });
  };
  changeAttitude = (id, action) => {
    const newList = this.state.defaultlist.map((item) => {
      if (item.rpid === id) {
        return { ...item, action };
      } else {
        return item;
      }
    });
    this.setState({
      defaultlist: newList,
    });
  };
  addComment = () => {
    if (this.state.txt.trim() === "") {
      // 获取焦点
      this.textareaRef.current.focus();
      return;
    }
    // 处理id

    const newID =
      this.state.defaultlist.length === 0
        ? 1
        : this.state.defaultlist[0].rpid + 1;
    const newList = [
      {
        // 评论id
        rpid: newID,
        // 用户信息
        user: {
          uid: "13258165",
          avatar:
            "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg",
          uname: "周杰伦",
        },
        // 评论内容
        content: this.state.txt,
        // 评论时间
        ctime: "10-18 08:15",
        // 喜欢数量
        like: 98,
        // 0：未表态 1: 喜欢 2: 不喜欢
        action: 0,
      },
      ...this.state.defaultlist,
    ];
    // console.log(newList);
    this.setState({
      defaultlist: newList,
      txt: "",
    });
  };
  commentChange = (e) => {
    console.log(e.target.value);
    this.setState({
      txt: e.target.value,
    });
  };
  render() {
    return (
      <div className="App">
        <div className="app">
          {/* 导航 Tab */}
          <Tab></Tab>
          <div className="reply-navigation">
            <ul className="nav-bar">
              <li className="nav-title">
                <span className="nav-title-text">评论</span>
                {/* 评论数量 */}
                <span className="total-reply">
                  {this.state.defaultlist.length}
                </span>
              </li>
              <li className="nav-sort">
                {/* 高亮类名： active */}
                {this.state.tab.map((item, index) => (
                  // className不管用什么方式，最终给className一个字符串
                  // {["nav-item",this.state.active
                  // ? "nav-item active"
                  // : "nav-item"].join('')}
                  <div
                    className={
                      item.type === this.state.active
                        ? "nav-item active"
                        : "nav-item"
                    }
                    key={index}
                    onClick={() => this.tabClick(item.type)}
                  >
                    按{item.text}排序
                  </div>
                ))}
                {/* <div className="nav-item active">最热</div>
                <div className="nav-item">最新</div> */}
              </li>
            </ul>
          </div>

          <div className="reply-wrap">
            {/* 发表评论 */}
            <div className="box-normal">
              {/* 当前用户头像 */}
              <div className="reply-box-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    src={avatar}
                    alt="用户头像"
                  />
                </div>
              </div>
              <div className="reply-box-wrap">
                {/* 评论框 */}
                <textarea
                  className="reply-box-textarea"
                  placeholder="发一条友善的评论"
                  value={this.state.txt}
                  onChange={this.commentChange}
                  ref={this.textareaRef}
                />
                {/* 发布按钮 */}
                <div className="reply-box-send">
                  <div className="send-text" onClick={this.addComment}>
                    发布
                  </div>
                </div>
              </div>
            </div>

            {/* 评论列表 */}
            <div className="reply-list">
              {/* 评论项 */}
              {this.state.defaultlist.map((item) => (
                <div key={item.rpid} className="reply-item">
                  {/* 头像 */}
                  <div className="root-reply-avatar">
                    <div className="bili-avatar">
                      <img
                        className="bili-avatar-img"
                        src={item.user.avatar}
                        alt=""
                      />
                    </div>
                  </div>

                  <div className="content-wrap">
                    {/* 用户名 */}
                    <div className="user-info">
                      <div className="user-name">{item.user.uname}</div>
                    </div>
                    {/* 评论内容 */}
                    <div className="root-reply">
                      <span className="reply-content">{item.content}~</span>
                      <div className="reply-info">
                        {/* 评论时间 */}
                        <span className="reply-time">{item.ctime}</span>
                        {/* 喜欢 */}
                        <span className="reply-like">
                          {/* 选中类名： liked */}
                          <i
                            onClick={() =>
                              this.changeAttitude(
                                item.rpid,
                                item.action === 1 ? 2 : 1
                              )
                            }
                            className={`icon like-icon ${
                              item.action === 1 ? "liked" : ""
                            }`}
                          />
                          <span>{item.like}</span>
                        </span>
                        {/* 不喜欢 */}
                        <span className="reply-dislike">
                          {/* 选中类名： disliked */}
                          <i
                            onClick={() =>
                              this.changeAttitude(
                                item.rpid,
                                item.action === 2 ? 1 : 2
                              )
                            }
                            className={`icon dislike-icon ${
                              item.action === 2 ? "disliked" : ""
                            }`}
                          />
                        </span>
                        <span
                          className="delete-btn"
                          onClick={() => this.delComment(item.rpid)}
                        >
                          删除
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="reply-none">暂无评论</div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
